<template>
  <div >
    <div class="filter-container hs-bg-card hs-panel">
      <el-input @keyup.enter.native="handleFilter" style="width: 200px" class="filter-item"
                v-model="listQuery.name"> </el-input>
      <el-button class="filter-item" type="primary" icon="search" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item" v-permission="'log:delete'"
                 style="float:right" @click="handleDelete"
                 type="danger" icon="el-icon-delete" circle>
      </el-button>
    </div>
    <div class="hs-bg-card hs-panel mt-2">
    <el-table :data="list"
              v-loading.body="listLoading"
              border fit highlight-current-row
              @selection-change="handleSelectionChange"
              style="width: 100%;margin: 10px 0">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column width="160" align="center" label="操作时间" prop="createdAt">
      </el-table-column>
      <el-table-column width="120" label="用户" prop="username">
      </el-table-column>
      <el-table-column width="80" align="center" label="操作" prop="operation">
      </el-table-column>
      <el-table-column width="160" align="center" label="请求函数" prop="method">
      </el-table-column>
      <el-table-column width="300" align="center" label="请求参数" prop="params">
      </el-table-column>
      <el-table-column width="130" align="center" label="操作地址" prop="location">
      </el-table-column>
      <el-table-column width="120" align="center" label="操作IP" prop="createdFrom">
      </el-table-column>
    </el-table>

    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="listQuery.pageNum"
                     :page-sizes="[10,20,30, 50]"
                     :page-size="listQuery.pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
    </div>
  </div>
</template>

<script>
import { page, delObjs } from 'api/admin/log'
import { mapGetters } from 'vuex'

export default {
  name: 'Log',
  data () {
    return {
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        username: undefined
      },
      logManager_btn_delete: false,
      multipleSelection: []
    }
  },
  computed: {
    ...mapGetters({
      elements: 'userElements'
    })
  },
  created () {
    this.getList()
    if (this.elements) {
      this.logManager_btn_delete = this.elements['log:delete']
    }
  },
  methods: {
    getList () {
      this.listLoading = true
      page(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleSelectionChange (val) {
      console.log(val)
      this.multipleSelection = val
    },
    handleDelete () {
      if (this.multipleSelection.length < 1) {
        this.$message.error('请先选择数据')
        return
      }
      this.$confirm('此操作将永久删除这几条日志, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let idArr = []
        for (let item in this.multipleSelection) {
          idArr.push(this.multipleSelection[item].id)
        }
        let ids = idArr.toString()
        delObjs(ids).then(() => {
          this.$message.success('删除成功')
          this.finishDel()
        })
      })
    },
    finishDel () {
      this.getList()
      // const index = this.list.indexOf(row)
      // this.list.splice(index, 1)
    },
    handleFilter () {
      this.getList()
    },
    handleSizeChange (val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.listQuery.pageNum = val
      this.getList()
    }
  }
}
</script>
